<template>
  <div class="app-container bg-white">
    <!-- 页面内容 -->
    <div class="page-body">
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="待审核" name="0" @onSubmit="onSubmit">
           <div class="full-width" id="mul_select">
            <el-form :inline="true" size="small" :ref="search">
                <el-form-item>
                    <el-input size="small" placeholder="请输入供应商名称" v-model.trim="search.name" maxlength="40" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" class="width_104" @click="getPageDataList()">查询</el-button>
                    <el-button size="small" class="width_104" @click="resetOption()">重置</el-button>
                </el-form-item>
            </el-form>
           </div>
           <el-table class="margin_top_20" :data="pageData" stripe :header-cell-style="tableHeaderStyle" v-loading="loading">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="name" label="供应商名称"></el-table-column>
            <el-table-column prop="suppType" label="供应商类型">
            <template slot-scope="scope">
                <span v-if="scope.row.suppType== 0">内部</span>
                <span v-else>外部</span>
            </template>
            </el-table-column>
            <el-table-column prop="suppCode" label="供应商代码" width="200"></el-table-column>
            <el-table-column prop="suppStandard" label="供应商编码" width="200">
            </el-table-column>
            <el-table-column prop="createTime" label="提交时间"></el-table-column>
            <el-table-column label="操作" width="260">
            <template slot-scope="scope">
                <button class="my-btn my-btn--mini my-btn--primary plain" @click="pass(scope.row)" v-if="roleBtns.includes('sys:supply:pass') || $store.getters.isAdmin">通过</button>
                <button class="my-btn my-btn--mini my-btn--primary plain" @click="reject(scope.row)" v-if="roleBtns.includes('sys:supply:reject') || $store.getters.isAdmin">驳回</button>
            </template>
            </el-table-column>
           </el-table>
           <div class="text-center">
             <br/>
            <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
           </div>
      </el-tab-pane>
      <el-tab-pane label="历史审核" name="1" @onSubmit="onSubmit">
          <div class="full-width" id="mul_select">
            <el-form :inline="true" size="small" :ref="search">
                <el-form-item>
                    <el-input size="small" placeholder="请输入供应商名称" v-model.trim="search.name" maxlength="40" clearable></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button size="small" type="primary" class="width_104" @click="getPageDataList()">查询</el-button>
                    <el-button size="small" class="width_104" @click="resetOption()">重置</el-button>
                </el-form-item>
            </el-form>
           </div>
           <el-table class="margin_top_20" :data="pageData" stripe :header-cell-style="tableHeaderStyle" v-loading="loading">
            <el-table-column type="index" label="序号"></el-table-column>
            <el-table-column prop="name" label="供应商名称"></el-table-column>
            <el-table-column prop="suppType" label="供应商类型">
            <template slot-scope="scope">
                <span v-if="scope.row.suppType== 0">内部</span>
                <span v-else>外部</span>
            </template>
            </el-table-column>
            <el-table-column prop="suppCode" label="供应商代码" width="200"></el-table-column>
            <el-table-column prop="suppStandard" label="供应商编码" width="200">
            </el-table-column>
            <el-table-column prop="auditStatus" label="审核状态" width="200">
              <template slot-scope="scope">
                <span v-if="scope.row.auditStatus== 2">审核通过</span>
                <span v-else>驳回</span>
              </template>
            </el-table-column>
            <el-table-column prop="createTime" label="提交时间"></el-table-column>
            <el-table-column label="操作" width="260">
            <template slot-scope="scope" >
              <!-- <el-popover placement="top-start" title="驳回原因" width="200" trigger="click" :content="scope.row.auditRemark" v-if="scope.row.auditStatus== 3">
               <button class="my-btn my-btn--mini my-btn--primary plain" style="margin-right: 10px" slot="reference">驳回原因</button>
              </el-popover> -->
              <button class="my-btn my-btn--mini my-btn--primary plain" @click="history(scope.row)">审核记录</button>
                <!-- <button class="my-btn my-btn--mini my-btn--primary plain" @click="reject(scope.row)" v-if="roleBtns.includes('sys:size:update') || $store.getters.isAdmin">驳回</button> -->
            </template>
            </el-table-column>
           </el-table>
           <br />
           <div class="text-center">
             <br/>
            <el-pagination background @size-change="handleSizeChange" @current-change="handlePagingChange" :current-page="pageIndex" :page-sizes="pageSizes" :page-size="pageSize" :layout="paginationLayout" :total="pageCount"> </el-pagination>
           </div>
      </el-tab-pane>
    </el-tabs>
    </div>
    <!-- isShowModel -->
    <!-- 驳回原因的弹框 -->
    <el-dialog title="驳回原因" :visible.sync="isShowModel" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" width="600px" destroy-on-close @close="closeDialog()">
      <el-form :label-width="'7em'">
        <el-form-item label="驳回原因" required>
          <el-input type="textarea" v-model="remark" placeholder="请输入驳回原因" :rows="6" maxlength="200" show-word-limit></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="isShowModel = false">取 消</el-button>
        <el-button type="primary" @click="confirm()" :loading="submitLoading">确 定</el-button>
      </div>
    </el-dialog>
    <!-- 历史审核的弹框 -->
    <el-dialog title="审核记录" :visible.sync="isShowHistory" append-to-body :close-on-click-modal="false" :close-on-press-escape="false" width="600px" destroy-on-close >
      <el-form :label-width="'7em'">
        <el-form-item>
          <div style="height: 300px;">
            <el-timeline>
              <el-timeline-item
                v-for="(item, index) in historyList"
                :key="index">
                {{item.creatorName}}:  {{item.createTime}}
                <div>
                <span v-if="item.status == 1">审核通过</span>
                <span v-else class="showClass">审核驳回: {{item.remark}}</span>
                </div>
              </el-timeline-item>
            </el-timeline>
          </div>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="handelCancleHistory()">关 闭</el-button>
      </div>
    </el-dialog>
    </div>
</template>

<script>
import { mapGetters } from 'vuex';
import { GetAuditSupplyPeopleList, AuditSupply, GetHistoryDetails } from '@/views/audit-center/services/index'
import Setting from '@/settings'
import Item from '@/layout/components/Sidebar/Item.vue';
  export default {
  components: { Item },
    name: 'setting',
    // components: {
    //   applySet,
    //   commissionSet
    // },
    data() {
      return {
        activeName: '0',
        param:{},
        pageIndex: 1,
        pageSize: Setting.defaultTablePaginationSize,
        pageSizes: Setting.tablePaginationSizes,
        tableHeaderStyle: Setting.tableHeaderStyle,
        paginationLayout: Setting.tablePaginationLayout,
        pageData: [],
        pageCount: 0,
        loading: false,
        isShowModel: false,
        search: {
            name: ''
        },
        remark: '',
        taskId: '',
        submitLoading: false,
        historyList: [],
        isShowHistory: false
      }
    },
    computed: {
      ...mapGetters(['roleBtns']),
    },
    created() {
      this.getPageDataList()
    },
    methods:{
      // 查看审核记录的详细信息
      history(data) {
         GetHistoryDetails({
           targetId: data.supplierId
         }).then(res =>{
             if(res.code == 200) {
               this.historyList = res.data
               this.isShowHistory = true;
             }
         })
      },
      handelCancleHistory() {
        this.isShowHistory = false;
        this.historyList = []
      },
      pass(data) {
        console.log(data)
        AuditSupply({
          taskId: data.taskId,
          status: '1'
        }).then(data =>{
          if(data.code == 200) {
            this.$message.success("审批成功！")
          }else {
            this.$message.error('审批失败！')
          }
          this.getPageDataList()
        }).catch(err => {
          console.log(err)
        })
      },
      reject(data) {
        this.taskId = data.taskId
        this.isShowModel = true
      },
      confirm() {
        if(!this.remark) {
          this.$message.warning("请填写驳回原因！")
          return
        }
        this.submitLoading = true
        AuditSupply({
          taskId: this.taskId,
          status: '2',
          remark: this.remark
        }).then(res =>{
          console.log(res)
          if(res.code == 200) {
            this.$message.success('审批成功！')
          }else {
            this.$message.error('审批失败！')
          }
          this.submitLoading = false
          this.isShowModel = false
          this.remark = ''
          this.getPageDataList()
        }).catch(err =>{
          console.log(err)
          this.remark = ''
          this.submitLoading = false
        })
      },
      // 重置操作
    resetOption() {
      this.search.name = ''
      this.pageIndex = 1
      this.getPageDataList()
    },
      closeDialog() {
        this.isShowModel = false
      },
      handleClick(tab, event) {
        console.log(tab, event);
        this.pageIndex = 1
        this.activeName = tab.name
        this.getPageDataList()
      },
      getPageDataList(){
        this.loading = true
        GetAuditSupplyPeopleList({
          type: Number(this.activeName),
          name: this.search.name,
          pageNum: this.pageIndex,
          pageSize: this.pageSize
        }).then(res=>{
          console.log(res)
          this.loading = false
          if(res.code  == 200){
            this.pageData = res.data.list
            this.pageCount = res.data.total
          }
        })
      },
       // 分页事件
    handleSizeChange(event) {
      this.pageIndex = 1
      this.pageSize = event
      this.getPageDataList()
    },
    handlePagingChange(event) {
      this.pageIndex = event
      this.getPageDataList()
    },
      onSubmit(val){
        console.log(val)
        val.creatorId = JSON.parse(this.$store.getters.userInfo).id ? JSON.parse(this.$store.getters.userInfo).id : '1'
        saveShareSettings(val).then(res=>{
          if(res.code  == 200){
            this.$message("保存成功")
            this.getPageDataList()
          }
        })
      }
    }
  }
</script>

<style scoped lang="scss">
 .container_box{
    background-color: #f2f2f7;
    height: 100vh;
    margin: 15px 25px;
    background: #fff;
    padding: 15px;
    border-radius: 6px;
    -webkit-box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
    box-shadow: 0 0 4px 0 rgba(200, 200, 200, 0.5);
  .tabBox {
    width: 100%;
    display: flex;
    align-items: center;
    border-bottom: 1px solid #333333;
    background-color: #FFFFFF;
    padding:0 20px;
    margin-top: 20px;

    p {
      width: 100px;
      text-align: center;
      font-size: 18px;
    }

    .active {
      font-weight: bold;
    }
  }
  }
 .showClass {
  word-wrap: break-word;
  word-break: break-all;
  overflow: hidden;
 }
</style>
